<template>
	<div>
		<div style="text-align: center;"><h2 class="title">每日排班表</h2></div>
		
		<div v-for="(item, i) in schedulingDataList" :key="i" class="create_item">
			<div>
				<h3 class="title" style="text-align: center;">{{ week_arr[i] }}</h3>
				<div class="export-excel-wrapper" 
				style="float: right;margin-bottom: 10px;margin-right: 20px;">
					<el-button type="primary" size="small" @click="tableToExcel(i, week_arr[i] + '.xls')">导出EXCEL</el-button>
				</div>
		
				<!-- <el-button size="small" style="float: right; margin: 0 10px;" type="primary" @click="print('print_week_arr' + i)">打印</el-button> -->
			</div>
		
			<div class="print_class_table" :id="['print_week_arr' + i]">
				<h2 class="title" style="padding: 10px 0;">执勤编班表</h2>
				<div class="sub">
					<span class="sub_name">作战勤务值班员:</span>
					<span class="sub_date">月 日 星期</span>
				</div>
		
				<table width="100%" border="1" cellspacing="0" :ref="['ref_download' + i]" style="border-color: #eee;">
					<thead>
						<tr width="100%">
							<th width="12.5%" rowspan="2" colspan="2">时间</th>
							<th :colspan="item.sentryPostList.length>7?item.sentryPostList.length:7">哨兵</th>
							<th width="12.5%" rowspan="2">应急小组</th>
						</tr>
						<tr>
							<th  colspan="1" v-for="(item2, index2) in item.sentryPostList" >{{ item2.sentryPostName }}</th>
							<th  colspan="1" v-for="(item2, index2) in (7- item.sentryPostList.length)" > /</th>
							
						</tr>
					</thead>
		
					<tbody>
						<!-- :prop="item" :label="item" :key="item" -->
						<tr v-for="(item2, index2) in item.timeQuantum" >
						
							<td colspan="2">{{ item2 }}</td>
		                    <td colspan="1" v-for=" (item3,index3) in item.data[index2]" >{{item3[0]&& item3[0].name }}</td>
		                         
								 <!--  补全 -->
								 
						<td colspan="1" :width="100" v-for=" (item3,index3) in (7- item.data[index2].length)" ></td>
						
						</tr>
		
						<tr>
							<td colspan="2">应急班人员</td>
							<td :colspan="7">应急班人员</td>
						</tr>
						<tr>
							<td colspan="2">替补人员</td>
							<td :colspan="7">替补</td>
						</tr>
		
						<tr>
							<td rowspan="2" width="6.25%">
								<span style="font-weight: bold;display: flex;justify-content: space-around;">查寝</span>
								<span style="font-weight: bold;display: flex;justify-content: space-around;">计划</span>
							</td>
							<td width="6.25%">时段</td>
							<td colspan="2">午夜前(22:00-24:00)</td>
							<td colspan="2">午夜后(0:00-5:00)</td>
							<td colspan="2">午休(12:30-14:50)</td>
							<td :colspan="item.sentryPostList.length - 5">其他时间</td>
						</tr>
						<tr>
							<td width="6.25%">人员</td>
							<td colspan="2"></td>
							<td colspan="2"></td>
							<td colspan="2"></td>
							<td :colspan="item.sentryPostList.length - 5"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
						
	</div>
</template>

<script>
	import {getSchedulingTask} from "@/api/tranShort/scheduling";
	//base64转码
	var base64 = function(s) {
		return window.btoa(unescape(encodeURIComponent(s)));
	};
	//替换table数据和worksheet名字
	var format = function(s, c) {
		return s.replace(/{(\w+)}/g, function(m, p) {
			return c[p];
		});
	};
	export default{
		data(){
		    return{
				schedulingDataList:[],
				week_arr: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
			}	
		},
		created() {
			let id = this.$route.query.id
			this.getSchedulingTask(id)
		},
		methods:{
			
			getSchedulingTask(id){
				
				getSchedulingTask(id).then(res=>{
					console.log(res)
					
					this.schedulingDataList = res.data.schedulingDataList
				})
				
			},
			tableToExcel(tableid, sheetName) {
				let html = this.$refs['ref_download' + tableid][0].outerHTML;
				var uri = 'data:application/vnd.ms-excel;base64,';
				var template =
					'<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +
					'xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>' +
					'<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>' +
					'</x:ExcelWorkbook></xml><![endif]-->' +
					' <style type="text/css">' +
					'table td {' +
					'border: 1px solid #999;' +
					'height: 30px;' +
					' text-align: center;' +
					' }' +
					'</style>' +
					`</head><body >
			
						${html}
						</body></html>`;
				if (!tableid.nodeType) tableid = document.getElementById(tableid);
				var ctx = {
					worksheet: sheetName || 'Worksheet',
					table: html
				};
			
				var aTag = document.createElement('a');
				// var blob = new Blob([ ]);
				aTag.download = sheetName;
				aTag.href = uri + base64(format(template, ctx));
				aTag.click();
				// URL.revokeObjectURL(blob);
			},
			
		}
		
	}
</script>

<style >
	
	
	.print_class_table {
		width: 1100px;
		height: 750px;
		margin: 0 auto;
		line-height: 30px;
		text-align: center;
		text-align: center;
		padding: 10px;
	}
	
	.print_class_table .title {
		letter-spacing: 26px;
		font-size: 34px;
		font-family: '宋体';
		margin: 20px 0 0 0;
	}
	
	.print_class_table .sub {
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-family: '宋体';
	}
	
	.print_class_table .sub_name {
		margin-left: 50px;
		font-size: 16px;
		color: #333;
	}
	
	.print_class_table .sub_date {
		margin-right: 50px;
		font-size: 16px;
		color: #333;
	}
	
	.print_class_table table {
		line-height: 30px;
	}
	
</style>
